<!-- 人员选择button -->
<template>
  <div class="flex flex-wrap gap-2">
    <div
      v-for="user in selectedUsers"
      :key="user.id"
      class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
    >
      <el-avatar class="!m-5px" :size="28" v-if="user.avatar" :src="user.avatar" />
      <el-avatar class="!m-5px" :size="28" v-else>
        {{ user.nickname.substring(0, 1) }}
      </el-avatar>
      {{ user.nickname }}
      <Icon
        icon="ep:close"
        class="ml-2 cursor-pointer hover:text-red-500"
        @click="handleRemoveUser(user)"
      />
    </div>
    <el-button type="primary" link @click="openUserSelect">
      <Icon icon="ep:plus" />选择人员
    </el-button>
  </div>
  <el-tooltip
    class="item"
    v-if="!hiddenTooltip && tooltipContent"
    :content="tooltipContent"
    effect="light"
    placement="top"
  >
    <Icon icon="ep:question-filled" class="ml-5px" />
  </el-tooltip>
  <!-- 用户选择弹窗 -->
  <UserSelectForm
    ref="userSelectFormRef"
    notSuccessMessage
    append-to-body
    @confirm="handleUserSelectConfirm"
  />
</template>
<script setup lang="ts">
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  tooltipContent: {
    type: String,
    default: '如果不选择人员，代表全体可见'
  },
  hiddenTooltip: {
    type: Boolean,
    default: true
  }
})
defineOptions({ name: 'UserSelectButton' })
const emit = defineEmits(['update:modelValue'])
const selectedUsers: any = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})
const userSelectFormRef = ref()
/** 打开人员选择 */
const openUserSelect = () => {
  userSelectFormRef.value.open(0, selectedUsers.value)
}
/** 移除人员 */
const handleRemoveUser = (user: any) => {
  selectedUsers.value = selectedUsers.value.filter((userItem: any) => userItem.id !== user.id)
}
/** 处理用户选择确认 */
const handleUserSelectConfirm = (_, users: any[]) => {
  selectedUsers.value = users || []
}
</script>
<style lang="scss" scoped></style>
